<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati commodi voluptas dolores odit. Magni, sed iste suscipit labore adipisci nesciunt. Tenetur exercitationem placeat est quisquam dignissimos architecto omnis ab soluta dolorum laboriosam obcaecati animi ipsam, beatae repellendus tempora. Magnam modi dicta quisquam magni alias! Nisi maxime sequi fuga dolorum dolor nemo sit tenetur illum, sapiente natus modi molestias nobis, amet vel deleniti perferendis magnam velit libero alias voluptate minima exercitationem beatae. Velit enim dolorum obcaecati autem, nobis dolorem explicabo facere nihil aspernatur ab nostrum itaque id ipsam molestias omnis. Aut deleniti maxime dolorem at culpa mollitia ipsam, alias deserunt ad?
</div>

<script>
    window.onload=()=>{
        const Obox = document.querySelector('#box')

    }
</script>

<style>
    #box{
        color: red;
    }

    #box::selection{
        color: black;
        line-height: 3em;
        background-color: cadetblue;
        font-size: 20px;
    }

</style>
</body>
</html>